<template>
	<view class="terminal-state">
		<u-toast ref="uToast"></u-toast>
		<u-no-network></u-no-network>
		<view class="title">
			分拨台数 <text class="color">{{count}}台</text>
		</view>
		<scroll-view class="home__grid-group mt-20" scroll-y @scrolltolower="onScrolltolower">
			<view>
				<view class="u-margin-20 terminal-state__item" v-for="(item,index) in terminalList" :key="index">

					<view class="u-font-15">
						终端SN：{{item.sn}}
					</view>
					<view class="u-margin-top-10">
						活动：{{item.activityName}}
					</view>



				</view>
				<u-loadmore :status="status" />
			</view>
		</scroll-view>

	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				value_style: {
					color: "#9D60FF"
				},
				src: "/static/image/home/icon_scan.png",
				thumb: "/static/image/home/icon_terminal_status.png",
				pageNo: 1,
				pageSize: "10",

				terminalList: [],
				scrollTop: 0,
				status: "loadmore",
				batchNo: "",
				count: ""
			}
		},
		onReachBottom() {
			this.onScrolltolower();
		},
		onLoad(options) {
			options.batchNo && (this.batchNo = options.batchNo);
			this.queryTerminalOperRecordDetail();
		},

		methods: {
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			onScrolltolower() {
				this.status = "loading";
				this.queryTerminalOperRecordDetail();
			},
			queryTerminalOperRecordDetail() {

				let _that = this;
				_that.$zx.terminal_api.queryTerminalOperRecordDetail(this.pageNo, this.pageSize, this.batchNo)
					.then((data) => {
						_that.count = data.length;
						_that.terminalList = _that.terminalList.concat(data);
						console.log("data=" + JSON.stringify(data))
						if (data.length !== 0) {
							this.status = "loadmore";
							this.pageNo += 1;
						} else {
							this.status = "nomore";
						}
					});
			},


		},
	}
</script>

<style scoped lang="scss">
	.terminal-state {
		&__header {
			padding: 20rpx;
			background-color: white;
		}

		&__item {
			background-color: white;
			border-radius: 20rpx;
			margin-top: 20rpx;
			padding: 20rpx;
		}
	}

	.color {
		color: #9D60FF;
	}

	.title {
		height: 80rpx;
		line-height: 80rpx;
		padding: 20rpx;
	}
</style>